<template>
  <view class="box">
    <view class="content">
      <scroll-view class="h100" scroll-y="true">
        <!-- <HomeList v-if="targetPageData.type=='salesOrder'" class="h100" @onButtonClick="onButtonClick"
					:pageData="targetPageData" @onItemClick="e=>homeListHanderEvent('itemClick','salesOrder',e)" />
				<HomeList v-if="targetPageData.type=='stock'" class="h100" :pageData="targetPageData" /> -->
        <My v-if="targetPageData.type == 'my'" />
        <!-- <InStock v-if="targetPageData.type=='inStock'" /> -->
        <!-- <OutStock v-if="targetPageData.type=='outStock'" /> -->
        <HomeList
          v-if="targetPageData.type == 'inStock'"
          class="h100"
          @onButtonClick="onButtonClick"
          :pageData="targetPageData"
          @onItemClick="(e) => homeListHanderEvent('itemClick', 'inStock', e)"
        />
        <HomeList
          v-if="targetPageData.type == 'outStock'"
          class="h100"
          @onButtonClick="onButtonClick"
          :pageData="targetPageData"
          @onItemClick="(e) => homeListHanderEvent('itemClick', 'outStock', e)"
        />
        <Reports v-if="targetPageData.type == 'reports'" />

        <Publish v-if="targetPageData.type == 'publish'"></Publish>
      </scroll-view>
    </view>

    <view class="tabbar">
      <ZoTabBar
        selectColor="#5E6D82"
        color="#5E6D82"
        fontMidIconColor="#98C7F9"
        :list="tabBarList"
        @midClick="(data) => handerEvent('TabCon', data)"
      />
    </view>
  </view>
</template>

<script setup>
import { onMounted, reactive, computed, ref, watch } from "vue";
import { onLoad, onShow, onHide, onShareAppMessage } from "@dcloudio/uni-app";
// import config from "@/config/config";
// import {} from '@/config/APIS.js'
import ZoTabBar from "../../components/ZOComponents/ZoTabBar/ZoTabBar.vue";
import HomeList from "../../components/TBMComponents/HomeList/index.vue";
import My from "../my/index.vue";
import Reports from "../reports/index.vue";
import Publish from "../publish/index.vue";

// const uniCloudManager = uniCloud.importObject('usersManager') //第一步导入云对象

const targetPageData = ref({
  icon: "calendar",
  selectIcon: "calendar-filled",
  text: "销售单",
  code: "list",
  type: "inStock",
});

const overlayShow = ref(false);

const tabBarList = ref([
  {
    icon: "calendar",
    selectIcon: "calendar-filled",
    text: "入库",
    code: "list",
    type: "inStock",
  },
  {
    icon: "calendar",
    selectIcon: "calendar-filled",
    text: "出库",
    code: "list",
    type: "outStock",
  },
  {
    icon: "plus-filled",
    iconSize: 70,
    isCenter: true,
    code: "publish",
    type: "publish",
  },
  {
    icon: "map",
    selectIcon: "map-filled",
    text: "报表",
    code: "list",
    type: "reports",
  },
  {
    icon: "contact",
    selectIcon: "contact-filled",
    text: "我的",
    code: "list",
    type: "my",
  },
]);

const getInit = async (mobile) => {
  targetPageData.value = tabBarList.value[0];
};

onHide(() => {});
onShow(() => {});

const onButtonClick = (listData) => {
  console.log(listData, "====listData===listData");
};

const homeListHanderEvent = async (eType, eStatusType, eData) => {
  switch (eType) {
    // 点击每一项触发
    case "itemClick":
      switch (eStatusType) {
        case "outStock": // 销售单 进入详情
          uni.navigateTo({
            url: `/pagesOrder/outStockAddDetails/index?type=details&id=${eData._id}`,
          });
          break;
        case "inStock": // 入库单详情
          uni.navigateTo({
            url: `/pagesStock/inStockAddDetails/index?type=details&id=${eData._id}`,
          });
          break;
        default:
          break;
      }
      break;
    default:
      break;
  }
};
const handerEvent = async (eType, data) => {
  console.log(eType, data, "==eType, data==");
  switch (eType) {
    // 新增
    case "overlayRectItem":
      if (data == "salesOrder") {
        uni.navigateTo({
          url: "/pages/salesOrderDetails/index?a=1",
        });
      } else if (data == "stock") {
        uni.navigateTo({
          url: "/pages/stockDetails/index?type=add",
        });
      }
      overlayShow.value = false;
      break;
    case "TabCon": //底部点击触发
      switch (data.code) {
        case "list":
          targetPageData.value = data;
          break;
        case "publish":
          // uni.navigateTo({
          // 	url: "/pages/salesOrderDetails/index?type=add"
          // })
          targetPageData.value = data;
          // uni.navigateTo({
          // 	url: "/pages/publish/index"
          // })
          break;

        default:
          break;
      }

      break;
    case "login": //获取登录信息
      break;
    default:
      break;
  }
};

watch(
  () => targetPageData.value,
  (newVal, oldVal) => {
    // getInit(newVal)
    console.log(newVal, "===targetPageData======");
  }
);

onMounted(() => {
  getInit();
});
</script>

<style lang="scss" scoped>
.box {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  // background-size: 100% 100%;
  // background-position: center center;
  position: relative;
  overflow: hidden;
  // background: linear-gradient(to bottom, #AACFF7, transparent);

  .h100 {
    height: 100%;
  }

  .content {
    width: 100vw;
    height: calc(100% - 182rpx);
    overflow: hidden;
    // display: flex;
    // flex-direction: column;
    // align-items: center;
    // justify-content: center;
    // background: url('https://hnah2022.cn/images/zhengtibeijing.png') no-repeat;
  }

  .tabbar {
    // height: 182rpx;
    /* 使用 rpx 适配底部安全区域 */
    // height: calc(140rpx + env(safe-area-inset-bottom));
    width: 100vw;
    position: absolute;
    bottom: 0px;
    // background: #ff5566;
    z-index: 45;
  }
}

.overlayWarp {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.overlayRect {
  width: 80%;
  height: 120px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #fff;
}

.overlayRectItem {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 20rpx;
  border: 2rpx solid #000;
  width: 200rpx;
  height: 120rpx;
}
</style>
